<template>
    <div class="content">
        <!-- <el-row>
            <el-col :span="24">
                <el-page-header @back="goBack" content="订单详情"></el-page-header>
            </el-col>
        </el-row> -->
        <el-row type="flex" align="middle" justify="center">
            <el-col :span="3">
                <h3 class="status">待开团</h3>
            </el-col>
            <el-col :span="1">
                <el-divider class="divider" direction="vertical"></el-divider>
            </el-col>
            <el-col :span="20">
                <el-steps :active="1" align-center>
                    <el-step v-for="(step,i) in steps" :key="i" :title="step.title" >
                        <template slot="icon" v-if="step.icon">
                            <svg-icon :icon-class='step.icon'></svg-icon>
                        </template>
                    </el-step>
                </el-steps>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <div class="fox-title">
                    <div>订单信息</div>
                    <div>
                        <el-button size="mini" type="primary"  @click="dialogVisible = true">发货</el-button>
                    </div>
                </div>
                <el-table
                    :data="order.good"
                    border
                    style="width: 100%"
                    >
                    <el-table-column
                        align="center" 
                        prop="order_sn"
                        label="订单编号"
                    >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="pic"
                        label="商品图片"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="商品名称"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="num"
                        label="数量"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="send_price"
                        label="运费"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="total"
                        label="总价"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="pay_total"
                        label="实付金额"
                   >
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="fox-title">
                    <div>收件人信息</div>
                </div>
                <el-card class="box-card" shadow="hover">
                    <div class="fox-li">收件人:{{order.user.name}}</div>
                    <div class="fox-li">手机号码:{{order.user.mobile}}</div>
                    <div class="fox-li">详细地址:{{order.user.address}}</div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <div class="fox-title">
                    <div>备注</div>
                    <div>
                        <el-button size="mini" type="primary" @click="handleClick('desc')">添加备注/修改备注</el-button>
                    </div>
                </div>
                <el-card class="box-card" shadow="hover">
                    <div class="fox-li">收件人:{{order.desc}}</div>
                </el-card>
            </el-col>
            <el-col :span="24">
                <div class="fox-title">
                    <div>操作记录</div>
                </div>
                <el-table
                    :data="order.good"
                    border
                    style="width: 100%"
                    >
                    <el-table-column
                        align="center" 
                        prop="order_sn"
                        label="订单编号"
                    >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="pic"
                        label="商品图片"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="name"
                        label="商品名称"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="num"
                        label="数量"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="send_price"
                        label="运费"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="total"
                        label="总价"
                   >
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="pay_total"
                        label="实付金额"
                   >
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 弹窗 -->
        <el-dialog
            title="发货"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose">
            <!-- 表单区域 -->
            <el-form size="mini"  label-position="left" label-width="80px" :model="ruleForm">
                <el-form-item label="快递公司">
                   <el-select style="width:100%" v-model="ruleForm.region" placeholder="请选择快递公司">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="快递单号">
                    <el-input style="width:100%" v-model="ruleForm.express_no"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name:"order_detail",
    components:{
        
    },
    data() {
        return {
            active_step:1,
            steps:[
                {
                    title:'付款成功'
                },
                {
                    title:'待拼团',
                    icon:"team"
                },
                {
                    title:'待发货',
                },
                {
                    title:'待用户收货'
                }
            ],
            order:{
                user:{
                    name:'诸葛大力',
                    mobile:'18040568854',
                    address:'湖北省武汉市江夏区和平大道08号'
                },
                good:[
                    {
                        order_sn:'ssada32e423142',
                        pic:'',
                        name:'商品名称',
                        num:1,
                        send_price:'10.00',
                        total:'16.00',
                        pay_total:'16.00'
                    }
                ],
                desc:'伸手党大多撒大所大所多撒多撒大多'
            },
            dialogVisible:false,
            ruleForm:{
                express_company:'',
                express_no:""
            }
        }
    },
    methods:{
        // 弹窗关闭
        handleClose(done){
            done()
        },

        // 返回上一页
        goBack(){
            this.$router.back();
        },

        // 按钮点击事件
        handleClick(){
            this.$prompt('请输入备注', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValidator:((val)=>{ if (val === '' || val === null || val === undefined) { return false }else{ return true; }}),
                    inputErrorMessage: '原因不能为空！'
                    }).then(({ value }) => {
                        this.disabled = true;
                        this.$api.serve.reject({ id:this.order_detail.id,reject_reason:value })
                        .then(()=>{
                            this.dialogVisible = false;
                            this.getList();
                            this.$message({
                                message:'操作成功！',
                                type:'success'
                            })
                        })
                        .finally(()=>{
                            this.disabled = false
                        })
                    })
                    .catch(() => {

                    });
        }
    }
}
</script>

<style lang="scss" scoped>
.content{
    .status{
        text-align: center;
    }
    .divider{
        height: 40px;
    }
    .fox-li{
        @include p(10,0);
    }
}
</style>